<template>
    <div class="relation-tree">
        <div v-for="node in nodes" :key="node.id" class="tree-node">
            <div :class="['node-content', { selected: node.id === selectedId }]" @click="$emit('select', node)">
                <span class="node-name">{{ node.name }}</span>
                <button class="relation-btn" @click.stop="$emit('open-relation-menu', node, $event)">选择关系</button>
            </div>
            <!-- 递归渲染子节点，递归时也传递所有事件 -->
            <RelationTree v-if="childrenNodes(node).length" :nodes="childrenNodes(node)" :all-nodes="allNodes"
                :selected-id="selectedId" @select="$emit('select', $event)"
                @choose-relation="$emit('choose-relation', $event)"
                @open-relation-menu="(...args) => $emit('open-relation-menu', ...args)" class="child-nodes" />
        </div>
    </div>
</template>

<script setup>
    import { computed, onMounted, watch } from 'vue'

    const props = defineProps({
        nodes: {
            type: Array,
            required: true,
            default: () => []
        },
        allNodes: {
            type: Array,
            required: true,
            default: () => []
        },
        selectedId: {
            type: String,
            default: ''
        }
    })

    // 使用computed属性来获取子节点，添加防御性检查
    const childrenNodes = computed(() => (node) => {
        if (!props.allNodes) {
            console.warn('RelationTree: allNodes is undefined', props)
            return []
        }
        return props.allNodes.filter(item => item.parentId === node.id)
    })

    // 添加调试代码
    onMounted(() => {
        console.log('RelationTree mounted:', {
            nodes: props.nodes,
            allNodes: props.allNodes,
            selectedId: props.selectedId
        })
    })

    watch(() => props.allNodes, (newVal) => {
        console.log('allNodes changed:', newVal)
    }, { immediate: true })

    watch(() => props.nodes, (newVal) => {
        console.log('nodes changed:', newVal)
    }, { immediate: true })
</script>

<style scoped>
    .relation-tree {
        text-align: left;
    }

    .tree-node {
        margin: 6px 0;
    }

    .node-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
        background: #fff;
        border-radius: 6px;
        transition: background 0.2s;
        cursor: pointer;
    }

    .node-content:hover {
        background: #f0f6ff;
    }

    .node-content.selected {
        background: #e0edff;
    }

    .node-name {
        font-size: 14px;
        color: #333;
    }

    .relation-btn {
        font-size: 13px;
        color: #3a7afe;
        background: none;
        border: none;
        padding: 4px 8px;
        cursor: pointer;
        border-radius: 4px;
        transition: background 0.2s;
    }

    .relation-btn:hover {
        background: #eaf2ff;
    }

    .child-nodes {
        margin-left: 24px;
        padding-left: 12px;
        border-left: 1px dashed #e0e0e0;
    }
</style>